<template>
	<view >
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(0.8)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(0.8)'
			         }" :list="list1" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="flexcenter" style="margin-top: 300rpx;" v-if="!list.data.length">
				<view class="placeholderimage"></view>
			</view>
			<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="todetail(item.id)">
				<view class="flexbetween">
					<view class="titletext hei_text bold">{{item.order_no}}</view>
					<!-- // 状态::0=全部,10=待审核,20=待取货,30=待入库,40=已完成,50=已作废,60=已拒绝,70=拒收 -->
					<view class="lable xiaohuang" v-show="item.status==10">待审核</view>
					<view class="lable xiaohuang" v-show="item.status==20">待取货</view>
					<view class="lable xiaohuang" v-show="item.status==30">待入库</view>
					<view class="lable xiaolv" v-show="item.status==40">已完成</view>
					<view class="lable xiaohong" v-show="item.status==50">已作废</view>
					<view class="lable xiaohong" v-show="item.status==60">已拒绝</view>
					<view class="lable xiaohong" v-show="item.status==70">拒收</view>
				</view>
				<view class="margin_top nostrongtext">创建时间：{{item.createtime_text}}</view>
				<view class="flexbetween margin_top nostrongtext">
					<view class="">配送方式：{{item.ps_type==1?"自提":"送货"}}</view>
					<view style="color: #ff0000;">积分：-{{item.total_score}}</view>
				</view>
				
				<view class="margin_top nostrongtext xiankuan" v-show="item.notes">备注：{{item.notes}}</view>
				<view class="flexbetween margin_top nostrongtext">
					<text>共{{item.goods_zl_num}}种，{{item.goods_num}}件</text>
					<text style="color: #FFB800;">合计：{{item.total_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require('@/commonFun/httpRequest.js');
	export default {
		data() {
			return {
				// :0=全部,10=待审核,20=待取货,30=待入库,40=已完成,50=已作废,60=已拒绝,70=拒收
				list1: [{
					name: '全部',
					id: "0"
				}, {
					name: '待审核',
					id: "10"
				}, {
					name: '待取货',
					id: "20"
				}, {
					name: '待入库',
					id: "30"
				}, {
					name: '已完成',
					id: "40"
				}, {
					name: '已作废',
					id: "50"
				},{
					name: '已拒绝',
					id: "60"
				},{
					name: '拒收',
					id: "70"
				}],
				tabsid:"0",
				page: 1,
				limit: 10,
				list: {
					data: [],
				},
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			tabChage(item) {
				this.tabsid = item.id;
				this.init();
			},
			// 我的订单列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/customapi/Salethorder/index', 'POST', {
					page: page || 1,
					limit: _this.limit,
					status: _this.tabsid,
				}).then(res => {
					let resList = res.data.data;
					if (isPage == true) {
						_this.list.data.push(...resList);
					} else {
						_this.list = res.data;
						_this.list.data = resList;
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			todetail(id){
				uni.navigateTo({
					url:"/pages/user/tuihuoddxq?id="+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	/deep/.u-tabs__wrapper__nav {
		background-color: #fff;
		justify-content: space-between;
	}

	.flexcolumn {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: flex-start;
		height: 180rpx;
		width: 100%;
	}

	.leftListimg {
		min-width: 180rpx;
		min-height: 180rpx;
		max-width: 180rpx;
		max-height: 180rpx;
		border-radius: 10rpx;
	}


	.public {
		color: #F5AC4F !important;
		border: 1px solid #F5AC4F !important;
	}

	.all {
		color: #333333;
	}

	.shopBox {
		padding: 20rpx;

		.shopM {
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
		}

		.shop {
			padding: 20rpx;
			display: flex;
			font-size: 32rpx;

			image {
				width: 226rpx;
				height: 210rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
				border-radius: 20rpx;
			}

			.rightBox {
				flex-grow: 1;

				.price {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.p1 {
						color: #FF0000;
					}

					.p2 {
						font-size: 32rpx;
					}
				}
			}
		}

	}

	.bottom {
		padding: 0 20rpx 20rpx 20rpx;
		font-size: 32rpx;
		overflow: hidden;

		.b1 {
			float: left;
			color: #999999;
		}

		.b2 {
			float: right;
			color: #F5AC4F;
			border-radius: 20px;
			border: 1px solid #F5AC4F;
			padding: 8rpx 12rpx;
		}

		.b3 {
			float: right;
			color: #333;
			border-radius: 20px;
			border: 1px solid #333;
			padding: 8rpx 12rpx;
		}

		.padd {
			padding: 4rpx 36rpx;
		}

		.d2 {
			float: right;
			display: flex;

			view:first-child {
				margin-left: 20rpx;
				color: #999999;
				border: 1px solid #999999;
				padding: 4rpx 10rpx;
				border-radius: 20px;
			}

			view:last-child {
				margin-left: 20rpx;
				border-radius: 20px;
				color: #333333;
				border: 1px solid #333333;
				padding: 4rpx 10rpx;
			}
		}

		.clearOrder {
			color: #FF0000;
			border: 1px solid #FF0000;
		}
	}

	/deep/.u-tabs__wrapper__nav__item__text {
		font-size: 38rpx !important;
	}
</style>
